<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul,
        ol {
            list-style: none;
        }

        a {
            text-decoration: none;
        }

        #container {
            border: 1px solid #000;
            width: 300px;
            margin: 100px auto;
        }

        #container h3 {
            text-align: center;
        }

        #container p {
            margin-bottom: 20px;
        }

        .form-group {
            display: flex;
            margin-bottom: 20px;
        }

        .form-label {
            flex: 4;
            text-align: right;
            margin-right: 10px;
        }

        .form-input {
            flex: 8;
        }

        .form-input .error {
            display: none;
            color: red;
        }
    </style>
</head>

<body>
    <div id="container">
        <h3>用户注册</h3>
        <div class="form-group">
            <label for="username" class="form-label">用户名</label>
            <div class="form-input">
                <input type="text" id="username">
                <span class="error"></span>

            </div>
        </div>
        <div class="form-group">
            <label for="password" class="form-label">密码</label>
            <div class="form-input">
                <input type="text" id="password">
                <span class="error"></span>
            </div>
        </div>
        <div class="form-group">
            <label for="re-password" class="form-label">确认密码</label>
            <div class="form-input">
                <input type="text" id="re-password">
                <span class="error"></span>
            </div>
        </div>
        <div class="form-group">
            <label class="form-label">性别</label>
            <div class="form-input">
                <input type="radio" name="gender">男
                <input type="radio" name="gender">女
                <span class="error"></span>
            </div>
        </div>
        <div class="form-group">
            <label for="grade" class="form-label">年级</label>
            <div class="form-input">
                <select id="grade">
                    <option value="-1">请选择</option>
                    <option value="2021">2021级</option>
                    <option value="2020">2020级</option>
                    <option value="2019">2019级</option>
                </select>
                <span class="error"></span>
            </div>
        </div>
        <div class="form-group">
            <label class="form-label">爱好</label>
            <div class="form-input">
                <input type="checkbox" name="hobby">唱歌
                <input type="checkbox" name="hobby">跳舞
                <input type="checkbox" name="hobby">画画
                <span class="error"></span>
            </div>
        </div>
        <div class="form-group">
            <label for="email" class="form-label">邮箱:</label>
            <div class="form-input">
                <input type="text" id="email">
                <span class="error"></span>
            </div>
        </div>
        <div class="form-group">
            <label class="form-label"></label>
            <div class="form-input">
                <button id="btn-submit">提交</button>
            </div>
        </div>
    </div>

    <script>
        // 获取提交按钮对象
        let btnSubmit = document.getElementById("btn-submit");
        let username = document.getElementById("username");
        let password = document.getElementById("password");
        let rePassword = document.getElementById("re-password")
        let grade = document.getElementById("grade");
        let email = document.getElementById("email");

        let genders = document.getElementsByName("gender");
        let hobbies = document.getElementsByName("hobby");

        // let usernameError = document.getElementById('username-error');
        // let passwordError = document.getElementById('password-error');
        btnSubmit.onclick = function () {
            if (username.value.trim() == "") {
                // alert('请输入用户名');
                showError(username, '请输入用户名信息')
                // username.focus();
            } else {
                hideError(username);
            }

            if (password.value.trim().length < 6) {
                // alert('请输入至少六位数的密码');
                showError(password, '密码长度不能少于6')
                // password.focus();
            }
            else {
                hideError(password);
            }

            if (rePassword.value.trim() == "") (
                showError(rePassword, '请重新输入密码')
            )
            else if (rePassword.value.trim() != password.value.trim()) {
                // alert('两次密码不一致');
                // rePassword.focus();
                showError(rePassword, '两次密码不一致');
            }
            else {
                hideError(rePassword);
            }
               
            
            let genderIsChecked = false;
            for( let i = 0; i<genders.length; i++){
                let gender = genders[i];
                if(gender.checked){
                    genderIsChecked = true;
                    break;
                }
            }
            // if(!genderIsChecked){
            //     alert('请至少选择一个性别');
            // }


            if (grade.value == '-1') {
                // alert('请选择一个班级')
                // grade.focus();
                showError(grade, '请选择一个年级')
            }else{
                hideError(grade);
            }

            // let hobbyIsChecked = false;
            // for (let i = 0; i < hobbies.length; i++) {
            //     let hobby = hobbies[i];
            //     if (hobby.checked) {
            //         hobbyIsChecked = true;
            //         break;

            //         if (!hobbyIsChecked) {
            //             alert('请至少选择一种爱好');
            //         }
            //     }
            // }

            if (email.value.trim() == "") {
                showError(email, '请输入邮箱');
            }

            else if (email.value.trim().indexOf('@') == -1) {
                showError(email, '邮箱中必须包含@')
                // alert('邮箱必须包含@');
                // email.focus();
            }
            else {
                hideError(email);
            }

            // function check(elems, message) {
            //     let IsChecked = false;
            //     for (let i = 0; i < elems.length; i++) {
            //         let elem = elems[i];
            //         if (elem.checked) {
            //             IsChecked = true;
            //             break;
            //         }
            //     }
            //     if (!IsChecked) {
            //         alert(message);
            //     }
            // }


            check(genders, '请选择性别');
            check(hobbies, '请至少选择一种爱好');

            function check(elems, message) {
                let isChecked = false;
                for (let i = 0; i < elems.length; i++) {
                    let elem = elems[i];
                    if (elem.checked) {
                        isChecked = true;
                        break;
                    }
                }
                if (!isChecked) {
                    showError(elems[elems.length - 1], message);
                } else {
                    hideError(elems[elems.length - 1]);
                }
            }


            // function check(elems, message) {
            //     let isChecked = false;
            //     for (let i = 0; i < elems.length; i++) {
            //         let elem = elems[i];
            //         if (elem.checked) {
            //             isChecked = true;
            //             break;
            //         }
            //     }
            //     if (!isChecked) {
            //         alert(message);
            //     }
            // }


            function showError(elem, message) {
                let error = elem.nextElementSibling; 
                error.innerHTML = message;
                error.style.display = 'block';
            }

            function hideError(elem) {
                let error = elem.nextElementSibling;
                error.innerHTML = "";
                error.style.display = 'none';
            }
        }



    </script>
</body>

</html>